import { View } from '@tarojs/components'
import { CSSProperties, forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import { fabric } from '../../lib/fabric.min.js'

type propsType = {
    style?: CSSProperties
}

const defaultVal = {
    style: {}
}

function ClothesStage(props: propsType = defaultVal, ref) {
    const [canvas] = useState(new fabric.Canvas('myCanvas'))
    const [imgs, setImgs] = useState([])

    useEffect(() => {
        for (const img of imgs) {
            canvas.add(img).setActiveObject(img);
        }
    }, [imgs])

    useImperativeHandle(
        ref,
        () => ({
            addImg
        }),
    )

    function addImg() {
        Taro.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
            success: function (res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                var tempFilePaths = res.tempFilePaths
                console.log(tempFilePaths);
                // const fabricImg = new fabric.Image(image, {
                //     crossOrigin: 'anonymous'
                // })
                // setImgs(imgs.concat(fabricImg))
            }
        })
    }

    return <View className='clothes-stage' onClick={() => addImg()}>
        <canvas id='myCanvas' style={props.style}></canvas>
    </View>
}
export default forwardRef(ClothesStage)